/* 考勤页面管理 */
<template>
  <el-card>
    <!-- 主div盒子 -->
    <div class="main">
      <div class="container">
        <!-- data：绑定接口参数列表 ,border：边框，stripe：隔行变色 -->
        <!-- :header-cell-style给表头添加背景颜色 -->
        <!-- 数据展示表单 -->
        <el-table
          :data="employeeList"
          border
          stripe
          style="
            width: 100%;
            font-size: 14px;
            box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
          "
          :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        >
          <!-- 索引列 -->
          <el-table-column
            label="工号"
            type="index"
            min-width="5%"
            align="center"
          >
          </el-table-column>
          <!-- 接口名字列 -->
          <el-table-column
            label="员工"
            prop="name"
            min-width="5%"
            align="center"
          ></el-table-column>
          <!-- 接口端口tag标签 -->

          <el-table-column
            label="部门"
            prop="department"
            min-width="8%"
            align="center"
          ></el-table-column>

          <!-- 接口简介列 -->
          <el-table-column
            label="考勤记录"
            prop="status"
            min-width="10%"
            align="center"
          ></el-table-column>
          <!-- 接口简介列 -->

          <el-table-column
            label="时间"
            prop="worktime"
            min-width="10%"
            align="center"
            :formatter="dateFormat"
          ></el-table-column>

          <!-- 接口状态列 -->
          <el-table-column
            label="记录状况"
            prop="status"
            min-width="5%"
            align="center"
          >
            <!-- tag标签，采用嵌套三元表达式的方法，判断接口的状态，动态显示颜色 -->
            <template slot-scope="scope">
              <!-- 若状态为‘正常’，则显示success，  -->
              <el-tag
                effect="light"
                :type="scope.row.status == '正常' ? 'success' : 'danger'"
              >
                {{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="10%" align="center">
            <template slot-scope="scope">
              <!-- 修改员工信息方法 参数为：row行数的id -->
              <el-tooltip
                effect="dark"
                content="修改信息"
                placement="top-start"
                :enterable="false"
                ><!--文字提示 enterable 隐藏-->
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showEditDialog(scope.row.id)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 size-change:每页最大变化 current-change：当前页数变化 layout：功能组件 
    之前不能实现切换的bug改好~！-->
        <div class="block" style="text-align: center; margin-top: 15px">
          <div class="pageHelper">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="fromData.pageIndex"
              :page-sizes="pageInfo.pageSizes"
              :page-size="fromData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
              <!-- @size-change：每页显示条数个数点击事件，当切换时动态的切换每页显示的条数
               @current-change：当前页数点击事件
               current-page:当前页码，默认为第一页
               page-sizes：在页面可选择的页码数[1,10,20,50] 
               page-size：每页显示的条数，可以动态的修改
               total：显示的是从后端获得数据的总数  -->
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  //created()方法指的是在页面开启的同时就调用里面的方法。
  created() {
    this.getEmployeeList(); //获取当前员工列表
  },
  //数据定义,判断输入的数据是否为空
  data() {
    return {
      value1: "",
      value2: "",
      employeeList: [], //用户列表
      //定义ref对象
      formInline: {
        region: "",
        name: "",
        sex: "",
        degree: "",
      },
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为10，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    //获取所有员工信息，显示在列表中
    async getEmployeeList() {
      this.loading = false;
      const { data: res } = await this.$http.get(
        "http://localhost:9005/sys/employee/list",
        {
          params: this.fromData,
        }
      );
      // const { data: res } = await this.$http.get(
      //   "http://localhost:9005/sys/employee/list"用9005端口放问
      //添加 params: this.fromData后，解决了切换数据失败
      // );
      if (res.code != 200) {
        this.$message.error("获取信息失败");
      }
      this.employeeList = res.data.list; //获取所有菜单
      this.pageInfo.total = res.data.total; //获得数据库中所有总数
    },
    //每页显示的条目个数的1改变
    handleSizeChange(val) {
      this.fromData.pageSize = val; //重新对每页显示条数进行更改
      this.getEmployeeList(); //重新获得列表的值
    },
    //当前页数的改变
    handleCurrentChange(val) {
      this.fromData.pageIndex = val; //对当前页数进行更改
      this.getEmployeeList(); //重新获得员工列表的值
    },

    //时间进行格式化输出，格式化为xx-xx-xx-xx-xx-xx
    dateFormat: function (row) {
      const dateStr = row.worktime;
      if (dateStr != null) {
        let date = new Date(row.worktime);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m;
      }
    },
  },
};
</script>

<style>
</style>